import React, { useMemo } from 'react'
import {
  Text, View, Image, ImageBackground,
} from 'react-native'
import Button from '@COMPONENTS/button/Button'
import EStyleSheet from 'react-native-extended-stylesheet'
import Images from '@IMAGE'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'
import CustomerService from '@COMPONENTS/modal/CustomerService'
import { BleConnectivityStatus } from '@CONSTANTS/BleConstants'
import { State } from 'react-native-ble-plx'
import AnalyticsUtil, { ANALYTICS_EVENT } from '@UTILS/AnalyticsUtil'

const customerService = () => { CustomerService.show() }
interface Props {
  status: BleConnectivityStatus.Disconnected | BleConnectivityStatus.Searching | 'exhausted'
  connectDevice: (state:State) => void
}
const NoStart: React.FC<Props> = (props) => {
  const { status, connectDevice } = props

  const statusDetail = useMemo(
    () => ({
      [BleConnectivityStatus.Disconnected]: {
        //  未连接设备
        title: '请先连接设备',
        source: Images.home.connectDevice,
        bottomButtonText: '连接设备',
        bottomButtonDisabled: false,
        onPress: () => {
          AnalyticsUtil.onEvent(ANALYTICS_EVENT.tap_home_device_not_connected.eventId)
          connectDevice(State.PoweredOn)
        },
        showService: true,
        isLoading: false,
      },
      [BleConnectivityStatus.Searching]: {
        //  设备连接中
        title: '设备连接中...',
        source: Images.home.loading,
        bottomButtonText: '连接设备',
        bottomButtonDisabled: true,
        onPress: () => {},
        showService: true,
        isLoading: true,
      },
      exhausted: {
        //  疗程已用完
        title: '请更换设备或\n订购新设备',
        source: Images.home.connectDevice,
        bottomButtonText: '联系客服帮助',
        bottomButtonDisabled: true,
        onPress: () => {
          AnalyticsUtil.onEvent(ANALYTICS_EVENT.tap_contact_support.eventId, { Type: '头痛治疗页】已连接：疗程用完' })
        },
        showService: false,
        isLoading: false,
      },
    }),
    [connectDevice],
  )
  console.log('NoStart')
  const {
    title, source, bottomButtonText, bottomButtonDisabled, onPress, showService = true, isLoading,
  } = statusDetail[status]

  return (
    <View style={styles.page}>
      <ImageBackground source={Images.home.notStart} style={styles.imgBox}>
        <Image source={source} style={[isLoading && styles.loading]} />
        <Text style={styles.text}>{title}</Text>
        <Button
          disabled
          onPress={() => {}}
          style={styles.button}
        >
          <Image source={Images.home.iconStartDisabled} />
          <Text style={styles.buttonText}>开始</Text>
        </Button>
      </ImageBackground>

      <LinearGradientButton
        style={[styles.linearGradient, bottomButtonDisabled && styles.disabledButton]}
        disabled={bottomButtonDisabled}
        onPress={onPress}
      >
        <Text style={[styles.bottomButtonText, bottomButtonDisabled && styles.disabledText]}>{bottomButtonText}</Text>
      </LinearGradientButton>

      {showService && (
      <Text style={styles.customer} onPress={customerService}>
        联系客服帮助
      </Text>
      )}

    </View>
  )
}

export default NoStart

const styles = EStyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '$bgColor',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imgBox: {
    width: 252,
    height: 372,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 105,
    paddingBottom: 77,
  },
  text: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Light',
    fontWeight: '300',
    color: '$fontColor',
    paddingTop: 12,
    flex: 1,
  },
  button: {
    width: 100,
    height: 46,
    borderRadius: 23,
    borderWidth: 0.5,
    borderColor: '#DCDCDC',
    backgroundColor: '#F3F3F5',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
  },
  buttonText: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#DCDCDC',
  },
  linearGradient: {
    borderRadius: 27,
    marginBottom: 20,
    marginTop: 30,
    backgroundColor: 'transparent',
    width: 235,
    height: 46,
    borderWidth: 0.5,
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomButton: {
    backgroundColor: 'transparent',
    width: 235,
    height: 46,
    borderWidth: 0.5,
    borderColor: 'transparent',
  },
  bottomButtonText: {
    fontSize: 16,
    fontFamily: 'PingFangTC-Medium',
    fontWeight: '500',
    color: '$white',
  },
  disabledButton: {
    backgroundColor: '#F3F3F5',
  },
  disabledText: {
    color: '#DCDCDC',
  },
  customer: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Light',
    fontWeight: '300',
    color: '$fontColor',
  },
  loading: {
    width: 48,
    height: 48,
  },
})
